<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>在线下单</title>
    <jsp:include page="../../head.jsp"/>
    <script type="text/javascript" src="<s:url value="/js/hint/jquery.hint.js"/>"></script>
    <script type="text/javascript" src="<s:url value="/js/jquery/jquery.json-2.2.js"/>"></script>
    <script type="text/javascript"
            src="<s:url value="/js/business/business.js"/>"></script>
    <script type="text/javascript">
        function onloadTabs() {
            var windows_width = document.body.clientWidth;
            if (windows_width < 1280) {
                $("#tabs").width("1280");
                $("div .custom_business").width("1280");
            }
        }
    </script>
    <style type="text/css">
        body {
            font: 12px/1.5 Tahoma;
        }

        table {
            clear: both;
        }

        ul, li {
            list-style: none;
        }

        .li1 {
            list-style: none;
            float: left;
            line-height: 2em;
        }

        .li2 {
            list-style: none;
            float: left;
        }

        .ul1 {
            list-style: none;
            clear: left;
        }

        .div_content {
            display: none;
        }

        .li_content {
            display: none;
        }

        .pointer {
            cursor: pointer;
        }

        .hiddenValue {
            display: none;
        }

        .sendSup {
            float: left;
        }

        .sendSup ul {
            float: left;
            margin-left: 0;
        }

        .sendSup ul li {
            float: left;
        }

        .sendSup ul li ul {
            float: left;
        }

        .sendSup ul li ul li {
            text-align: center;
        }

        .bizMsg {
            margin: 5px;
            float: left;
        }

        .bizMsg div ul {
            padding-left: 0px;
            margin-left: 0px;
        }

        .bizMsg div ul li inpu {
            width: 140px;
        }

        .bizMsg div ul li select {
            width: 140px;
            z-index: 0;
        }

        .clean {
            clear: both;
        }

        .custom_business {
            background-color: #f0f2f2;
            padding: 2px;
            margin: 5px 0;
        }

        .topsort {
            padding-right: 10px
        }

        .ui-tabs .ui-tabs-panel {
            padding: 0px
        }
    </style>
</head>
<script type="text/javascript">
    var identification = "${identification}";
    if (identification == "importExl") {
        //当从在线下单页面导入exl表格时跳到这个页面时才会执行这个方法
        //商品列表
        <c:forEach var="da" items="${declare.commodities}" varStatus="st">
        <%--<s:iterator value="declare.commodities" status="st">--%>
        <c:if test="${st.first}">commodities1 = [</c:if>
            {
                code_t: "${da.code_t}",
                record_id: "${da.record_id}",
                name: "${da.name}",
                goods_mode: "${da.goods_mode}",
                destination: "${da.destination}",
                count: "${da.count}",
                unit: "${da.unit}",
                currency: "${da.currency}",
                total_price: "${da.total_price}",
                levymode: "${da.levymode}"
            }
            <c:if test="${st.last}">]</c:if><c:if test="${!st.last}">,
        </c:if>
        <%--</s:iterator>--%>
        </c:forEach>
        //委托公司
        var supCompany1 = {name: ""};
        if ("${declare.supCompany}" != null) {
            var supCompany1 = {name: "${declare.supCompany.name}"};
        }
        var declareTemp1 = {
            id: "${declare.id}",
            supCompany: supCompany1,
            export_port: "${declare.export_port}",
            record_id: "${declare.record_id}",
            export_date: "${declare.export_date}",
            company_name: "${declare.company_name}",
            transport_mode: "${declare.transport_mode}",
            transport_na: "${declare.transport_na}",
            bl_no: "${declare.bl_no}",
            fahuo_company_name: "${declare.fahuo_company_name}",
            trade_mode: "${declare.trade_mode}",
            levymode: "${declare.levymode}",
            lc_type: "${declare.lc_type}",
            license_no: "${declare.license_no}",
            arrived_country: "${declare.arrived_country}",
            arrived_port: "${declare.arrived_port}",
            goods_addr: "${declare.goods_addr}",
            approval_no: "${declare.approval_no}",
            deal_mode: "${declare.deal_mode}",
            freight1: "${declare.freight1}",
            premium1: "${declare.premium1}",
            otherfee1: "${declare.otherfee1}",
            contract_no: "${declare.contract_no}",
            goods_count: "${declare.goods_count}",
            goods_package: "${declare.goods_package}",
            gross_weight: "${declare.gross_weight}",
            net_weight: "${declare.gross_weight}",
            suifudan: "${declare.suifudan}",
            remark: "${declare.remark}",
            commodities: commodities1
        };
        var declareTemp2 = $.toJSON(declareTemp1);
        var declareTemp = encodeURI(encodeURI(declareTemp2));
    }
    var tabs = null;

    // 	busi('trail','business-trail','拖车');

    //展示tab
    function busi(id, url, title, ajaxOption, isModel) {
        //debugger
        if (tabs == null) {
            tabs = $("#tabs").tabs({cache: true});
        }
        var bizs = $("#busiType input[type=checkbox]");
        var index = 0;
        var haschecked = 0;
        if ($("#" + id).attr("checked")) {
            $.each(bizs, function (i, n) {
                if (n.checked) {
                    if (id == n.id) {
                        index = haschecked;
                        return;
                    } else {
                        if (n.id == 'trail') {
                            tabs.tabs("remove", 1);
                        } else {
                            if (!($("#trail").attr('checked'))) {
                                tabs.tabs("remove", 0);
                            }
                        }
                        haschecked++;
                    }
                }
            });
            var ctime = new Date();
            var tdate = ctime.getTime();
            url = url + (url.indexOf("?") == -1 ? "?" : "&");
            if (ajaxOption) {
                tabs.tabs({ajaxOptions: ajaxOption});
            } else {
                tabs.tabs({ajaxOptions: null});
            }
            if (isModel == "1") {
                tabs.tabs("add", url + "tdate=" + tdate, title, index);
                tabs.tabs("select", index);
                $("#orderSave").show();
            } else {
                //business-declarationMain?clearPk=1&modelType=1&id=402880bd4de59397014de59dda010000&tdate=1474985371935&isRecord=F
                if (title == "拖车") {
                    tabs.tabs("add", url + "tdate=" + tdate + "&isRecord=F", title, index);
                    tabs.tabs("select", index);
                    $("#orderSave").show();
                } else if (title == "手册报关") {
                    tabs.tabs("add", url + "tdate=" + tdate + "&isRecord=T", title, index);
                    tabs.tabs("select", index);
                    $("#orderSave").show();
                } else if (title == "非手册报关") {
                    tabs.tabs("add", url + "tdate=" + tdate + "&isRecord=F", title, index);
                    tabs.tabs("select", index);
                    $("#orderSave").show();
                }
                ;
            }
        } else {
            $.each(bizs, function (i, n) {
                if (id == n.id) {
                    index = haschecked;
                    return;
                } else if (n.checked) {
                    haschecked++;
                }
            });
            tabs.tabs("remove", index);
            $("#orderSave").hide();
        }
    }

    /**
     *从历史业务数据载入模版，页面导航
     *bizType = [all, booking, trail, declaration]
     */
    function loadBizFromHistory(bizType) {
        //checkData(当前判断条件为checkbox是否被选中)
        //newForm
        //loadData
        if (checkData(bizType)) {
            loadBizFromHistoryOperation(bizType);
        } else {
            jw.confirm("检测到当前页面有未保存的业务数据，是否继续操作，点击确认将覆盖当前数据?", function () {
                loadBizFromHistoryOperation(bizType);
            }, function () {
                return;
            });
        }
    }

    /**
     *从历史业务数据载入模版，真实操作
     *bizType = [all, booking, trail, declaration]
     */
    function loadBizFromHistoryOperation(bizType) {
        newForm(bizType);
        if (bizType == "all") {
            jw.dialog({
                          iframe: 'business-businessListForLoadBiz?loadPage=load',
                          width: 800, height: 300
                      });
        } else if (bizType == "book") {
            jw.dialog({
                          iframe: 'business-bookingListForLoadBiz?loadPage=load',
                          width: 800, height: 300
                      });
        } else if (bizType == "trail") {
// 			jw.dialog({ iframe : 'business-trailListForLoadBiz?loadPage=load',
// 				width : 800, height : 430 });
            jw.dialog({
                          iframe: 'model-main?type=C',
                          width: 800, height: 430
                      });
        } else if (bizType == "declarate") {
// 			jw.dialog({ iframe : 'business-declarationListForLoadBiz?loadPage=load',
// 				width : 800, height : 300 });
            jw.dialog({
                          iframe: 'model-main?type=D',
                          width: 800, height: 430
                      });
        }
    }

    /**
     *清理页面数据
     */
    function newForm(bizType) {
// 		$("input[name='shipper.id']").val("");
// 		$("input[name='shipper.company']").val("");
// 		$("input[name='shipper.name']").val("");
// 		$("input[name='shipper.phone']").val("");
// 		$("input[name='shipper.address']").val("");
        clearAllTab(bizType);
    }

    /**
     *清理tab标签
     */
    function clearAllTab(bizType) {
        if (tabs == null) {
            tabs = $("#tabs").tabs({cache: true});
        }
        var bizs = $("#busiType input[type=checkbox]");
        var index = 0;
        var tempIndex = 0;
        $.each(bizs, function (i, n) {
            if (n.checked) {
                //若是选择三种业务一起载入则将所有的tab清除
                if (bizType == "all") {
                    tabs.tabs("remove", 0);
                    $(n).attr("checked", false);
                } else if (n.id == bizType) {
                    index = tempIndex;
                    tabs.tabs("remove", index);
                    $(n).attr("checked", false);
                } else {
                    if (bizType == 'declarate') {
                        if (!($("#trail").attr('checked'))) {
                            tabs.tabs("remove", 0);
                            $(n).attr("checked", false);
                        } else {
                            tabs.tabs("remove", 1);
                            $(n).attr("checked", false);
                        }
                    } else if (bizType == 'trail') {
                        index = tempIndex;
                        tabs.tabs("remove", index);
                        $(n).attr("checked", false);
                    } else {
                        tempIndex++;
                    }
                }
            }
        });
    }

    /**
     *检测页面是否有下单数据
     */
    function checkData(bizType) {
        var cresult = true;
        $("#busiType input[type=checkbox]").each(function (i, n) {
            if (n.checked) {
                if (n.id == bizType) {
                    cresult = false;
                }
                if (n.id == "declarate1") {
                    cresult = false;
                }
            }
            if ("all" == bizType) {
                cresult = false;
            }
        });
        return cresult;
    }

    /**
     *从历史业务数据载入模版数据
     *bizId 三种业务统一的业务ID
     *bizType = [all, C, D, F]，分别代表all,拖车,货代,报关
     */
    function loadBizFromHistoryData(bizId, id, bizType, isRecordInfo,isAgent) {
        //load data
        //set data
        var data = "bizId=" + bizId + "&bizType=" + bizType + "&isRecordInfo" + isRecordInfo +"isAgent="+ isAgent;
        $
                .ajax({
                          url: "business-loadBizFromHistoryData",
                          cache: false,
                          async: false,
                          dataType: "json",
                          data: data,
                          success: function (data) {
                              //set shipper
                              //debugger
                              initInputByJsonObj(data.shipper, "shipper");
                              if (data.declare && data.declare.id && data.declare.id != ""
                                  && bizType == "declaration") {
                                  if (isRecordInfo == 'T') {
                                      $("#declarate").attr("checked", true);
                                      busi("declarate",
                                           'business-declarationMain?clearPk=1&modelType=1&id='
                                           + data.declare.id, '手册报关', {async: false});
                                  } else if (isRecordInfo == 'F') {
                                      $("#declarate1").attr("checked", true);
                                      busi("declarate1",
                                           'business-declarationMain?clearPk=1&modelType=1&id='
                                           + data.declare.id, '非手册报关', {async: false});
                                  }
                              }
                              if (bizType == "all") {
                                  if (data.declare && data.declare.id && data.declare.id != "") {
                                      if (isRecordInfo == 'T') {
                                          $("#declarate").attr("checked", true);
                                          busi("declarate",
                                               'business-declarationMain?clearPk=1&modelType=1&id='
                                               + data.declare.id, '手册报关', {async: false});
                                      } else if (isRecordInfo == 'F') {
                                          $("#declarate1").attr("checked", true);
                                          busi("declarate1",
                                               'business-declarationMain?clearPk=1&modelType=1&id='
                                               + data.declare.id, '非手册报关', {async: false});
                                      }
                                  }
                              }
                          }
                      });
    }

    /**
     *工具方法，将json对象里的属性set到对应的input中
     */
    function initInputByJsonObj(jobj, perfix) {
        for (var item in jobj) {
            //alert(perfix+"."+item+"="+jobj[item]);
            $("input[name='" + perfix + "." + item + "']").val(jobj[item]);
        }
    }

    $(function () {
        $("#personalInfo").on("click", function () {
            $.ajax({
                       url: "business-getSelfMsg?tdate11=" + timeNum(),
                       success: function (data, textStatus, jqXHR) {
                           if (data.shipper != null) {
                               $("#company_tname").val(data.shipper.company);
                               $("#company").val(data.shipper.company);
                               $("#name").val(data.shipper.name);
                               $("#phone").val(data.shipper.phone);
                               $("#address").val(data.shipper.address);
                               $("#shipId").val(data.shipper.id);
                               $("#fax").val(data.shipper.fax);
                           } else {
                               jw.alert($.parseJSON(data.msg).msg);
                           }
                       }
                   });
        });

        //处理手册非手册报关单选择问题
        $(':checkbox[name=busiType]').each(function () {
            $(this).click(function () {
                if ($(this).attr('checked')) {
                    if ($("#trail").attr('checked')) {
                        if ($("#declarate").attr('checked') && $("#declarate1").attr('checked')) {
                            $(':checkbox[id=declarate]').removeAttr('checked');
                            $(':checkbox[id=declarate1]').removeAttr('checked');
                            $(this).attr('checked', 'checked');
                        } else {
                            $(this).attr('checked', 'checked');
                        }
                    } else {
                        $(':checkbox[name=busiType]').removeAttr('checked');
                        $(this).attr('checked', 'checked');
                    }
                }
            });
        });
    });
    function importBusiExl() {
        var param = {
            id: '#importExl'
        };
        jw.dialog(param);
    }

    function getPi(value) {
        var cBook = $('#book').attr('checked');
        var cTrail = $('#trail').attr('checked');
        var cDeclarate = $('#declarate').attr('checked');
        if (value && value != "最长20个字符") {
            if (cBook == "checked") {
                $("#book_pi").attr("value", value);
            }
            if (cTrail == "checked") {
                $("#trial_pi").attr("value", value);
            }
            if (cDeclarate == "checked") {
                $("#contract_no").attr("value", value);
            }
        }
    }
    $(document).ready(function () {
        //下单页面打开默认选择拖车
// 		$("#trail").attr("checked",true);
// 		busi('trail','business-trail','拖车');
        if (identification == "importExl") {
            $("#declarate").attr("checked", true);
            busi("declarate", 'business-declaration?declareStr=' + declareTemp, '报关');
        }
    });
</script>
<body class="page_font" style="background-color: #f4f9ff"
      onload="javascript:onloadTabs();">
<input id="singleTypeInput" value="${singleType}" type="hidden"/>
<input id="businessInput" value="${id }" type="hidden"/>
<div id="mrdForm" style="display: none;">
    <table>
        <tr>
            <td class="topsort">基本资料填写</td>
        </tr>
    </table>
    <table>
        <tr>
            <!-- 				<td>委托公司名称：</td> -->
            <!-- 				<td><input type="text" id="company_tname" /></td> -->
            <td><input type="hidden" value="我是委托人" id="personalInfo"/></td>
        </tr>
    </table>
</div>
<div>
    <form method="post" id="businessForm">
        <div class="sendSup" id="baseInfoDiv" style="display: none;">
            <ul>
                <li>
                    <ul class="right-aligned">
                        <li class="li1">公司名称：<input type="text" id="company"
                                                    readOnly="readOnly" name="shipper.company"
                                                    value="${shipper.company}"/></li>
                        <li class="li1 li1_space">联系人：<input type="text" id="name"
                                                             readonly="readonly" name="shipper.name"
                                                             value="${shipper.name }"/></li>
                        <li class="li2 li1_space">联系电话：<input type="text" id="phone"
                                                              readonly="readonly"
                                                              name="shipper.phone"
                                                              value="${shipper.phone }"/></li>
                        <li class="li2 li1_space">联系地址：<input type="text"
                                                              readonly="readonly" id="address"
                                                              name="shipper.address"
                                                              value="${shipper.address}"/><input
                                type="text" id="shipId"
                                name="shipper.id"
                                value="${shipper.id }"/>
                        </li>
                        <li class="li2 li1_space">传真：<input type="text" id="fax"
                                                            readonly="readonly" name="shipper.fax"
                                                            value="${shipper.fax}"/></li>
                        <li class="li2 li1_space">邮箱：<input type="text" id="email"
                                                            readonly="readonly" name="shipper.email"
                                                            value="${shipper.email}"/></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 业务状态 -->
        <input type="hidden" id="bizState" name="bizState" value="0"/>
        <div>
            <table>
                <tr>
                    <td class="topsort">业务类型：</td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div id="book_input" style="display: none;"></div>
        <div class="custom_business">
            <ul>
                <li class="striking" id="busiType"
                    style="float: left; margin-right: 20px;">新增业务：
                </li>
                <li class="striking" id="busiType"
                    style="float: left; margin-right: 20px;">
                    <input type="checkbox" name="busiType" id="trail" style="display: none;"
                           onclick="busi(this.id,'business-trail','拖车');"/>
                    <!-- 						拖车  -->
                    <input type="checkbox" name="busiType" id="declarate"
                           onclick="busi(this.id,'business-declarationMain','手册报关');"/>手册报关
                    <input type="checkbox" name="busiType" id="declarate1"
                           onclick="busi(this.id,'business-declarationMain','非手册报关');"/>非手册报关
                    <!-- 						<input type="checkbox" name="busiType" id="declarate" -->
                    <!-- 						onclick="busi(this.id,'business-declarationMain','报关');" />报关(新) -->
                </li>
                <li style="clear: both;"></li>
                <li class="striking" id="busiType"
                    style="float: left; margin-right: 20px;">导入模板：&nbsp;&nbsp;&nbsp;&nbsp;
                    <!-- 						<a style="font-size: 10pt; color: #f00;" -->
                    <!-- 						href="javascript:loadBizFromHistory('trail');">拖车</a>&nbsp;&nbsp;&nbsp;&nbsp; -->
                    <a style="font-size: 10pt; color: #f00;"
                       href="javascript:loadBizFromHistory('declarate');">报关</a>
                </li>
                <!-- <li id="historyBusiType" style="float:left; ">从历史业务数据载入
                <input type="button" style="display: none;" onclick="loadBizFromHistory('all')" value="三种业务" />
                <input type="button" style="display: none;" onclick="loadBizFromHistory('book')" value="订舱" />
                <input type="button" style="background-color: #94e7ff;border:1px solid #6acce8 ;cursor: pointer;border-radius:3px" onclick="loadBizFromHistory('trail')" value="拖车" />
                <input type="button" style="background-color: #94e7ff;border:1px solid #6acce8 ;cursor: pointer;border-radius:3px" onclick="loadBizFromHistory('declarate')" value="报关" />
            </li> -->
                <li style="clear: both;"></li>
            </ul>
            <!--  <input type="button" onclick="check(0);" value="保存订单" />
        <input type="button" onclick="check(1);" value="提交订单" />-->
            <input type="button" style="display: none;"
                   onclick="importBusiExl();" value="导入报关exl"/>
        </div>

        <div id="tabs" style="background: #eee; height: 100%;">
            <ul id="liList">
                <%--
            <s:include value="declaration.jsp" />
             --%>
            </ul>
        </div>
    </form>
    <div style="clear: both"></div>
</div>
<div id="importExl" style="display: none">
    <form id="importForm" action="<s:url value="business-importBusiExl"/>"
          enctype="multipart/form-data" method="POST">
        <file label="选择exl文件" name="importExl"/>
        <input type="submit" value="导入"/>
    </form>
</div>
<div id="orderSave" style="display: none; margin-top: 10px; z-index:"
     align="center">
    <input id="saveBtn" type="button"
           style="background-image: url('<s:url
                   value="../img/btn-tu3.png"/>'); background-repeat: no-repeat; width: 100px; height: 32px; border: none; cursor: pointer; background-color: transparent;"
           onclick="check(0);"/>
    <!-- <input id="submitBtn" type="button" style="background-image: url('../img/btn-tu1.png'); background-repeat:no-repeat;width:113px;height: 32px; border:none;cursor: pointer;margin-left:10px; background-color: transparent;" onclick="check(1);" /> -->
</div>
</body>
</html>
